<template>
	<view class="seckill-card">
		<view class="seckill-block">
			<view class="flex ac jb seckill-title">
				<view class="flex ac">
					<view class="por seckill-text">
						<view class="text-hide">创新头条</view>
					</view>
				</view>
				<view class="more flex ac " @tap="goMore">
					<view class="text">更多</view>
					<image class="img" src="@/static/public/ic_global_more.png"></image>
				</view>
			</view>
		</view>
		<view class="notice-view">
			<view class="flex-x-c notice-item">
				<view class="circle"></view>
				<view class="line-1">这是一条公告这是一条公告这是一条公告这是一条公告这是一条公告这是一条公告</view>
			</view>
			<view class="flex-x-c notice-item">
				<view class="circle"></view>
				<view>这是一条公告</view>
			</view>
			<view class="flex-x-c notice-item">
				<view class="circle"></view>
				<view>这是一条公告这是一条公告</view>
			</view>
			<view class="flex-x-c notice-item">
				<view class="circle"></view>
				<view>这是一条公告这是一条公告</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			
		},
		data() {
			return {
				flag: 0,
				lastX: 0,
				lastY: 0,
				initParam: {},
				current: 0,
				title: '潮玩君力荐', // 标题
				participantType: '', // 活动参与者类型
				headerColor: "background:#fff"
			};
		},
		mounted() {
		},
		methods: {
		}
	};
</script>

<style lang="scss" scoped>
	.notice-view{
		padding: 0 20rpx;
		padding-bottom: 10rpx;
		.notice-item{
			padding: 10rpx 0;
		}
	}
	.circle{
		width: 10rpx;
		height: 10rpx;
		border-radius: 5rpx;
		background-color: $uni-color-primary;
		margin-right: 10rpx;
		flex-shrink: 0;
	}
	.seckill-card {
		background-color: #fff;
		border-radius: 10rpx;
		position: relative;
		z-index: 1;
		margin-bottom: 12rpx;

		.seckill-block {
			margin: 0 auto;
			width: 702rpx;
			border-radius: 16rpx;
			opacity: 1;

			.seckill-title {
				padding: 20rpx;
				height: 72rpx;

				.seckill-text {
					font-size: 30rpx;
					font-weight: 500;
					color: #666;

					// &:after {
					// 	position: absolute;
					// 	bottom: 4rpx;
					// 	left: 0;
					// 	z-index: 1;
					// 	width: 100%;
					// 	height: 12rpx;
					// 	display: table;
					// 	content: ' ';
					// 	background: rgba(230, 214, 181, 1);
					// }
					.text-hide {
						opacity: 1;
					}

					.text-show {
						bottom: 0;
						left: 0;
						z-index: 2;
					}
				}

				.more {
					color: #999999;
					font-size: 24rpx;

					.img {
						width: 24rpx;
						height: 24rpx;
					}

					.text {
						color: #999999;
						font-size: 24rpx;
						line-height: 1.5
					}
				}
			}

			.seckill-list {
				width: 100%;
				padding: 0 18rpx;
				overflow-y: auto;
				text-align: left;
				white-space: nowrap;
				box-sizing: border-box;

				.seckill-li {
					position: relative;
					width: 184rpx;
					height: 234rpx;
					margin: 0 6rpx;
					padding: 0rpx;
					background: #fff;
					display: inline-block;
					vertical-align: top;
					border-radius: 12rpx;
					overflow: hidden;

					.img {
						width: 184rpx;
						height: 184rpx;
						display: block;
						background-color: #eaeaea;
						border-radius: 12rpx 12rpx 0px 0px;
					}

					.img-mask-wrapper {
						position: absolute;
						top: 0;
						left: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 184rpx;
						height: 184rpx;
						background: rgba(0, 0, 0, 0.3);
						border-radius: 12rpx 12rpx 12rpx 12rpx;

						.noting-img {
							width: 102rpx;
							height: 34rpx;
						}
					}

					.seckill-information {
						margin: 0 8rpx;
						text-align: left;
						margin-top: 4rpx;

						.price {
							color: rgba(255, 20, 87, 100%);
							font-size: 24rpx;
							line-height: 40rpx;

							.fontSize16 {
								font-size: 16rpx;
							}

							.fontSize20 {
								font-size: 20rpx;
							}
						}

						.start-price {
							color: #999;
							font-size: 18rpx;
							text-decoration: line-through;
							padding-left: 6rpx;
						}
					}
				}

				.seckill-li-more {
					min-width: 184rpx;
					height: 234rpx;
					margin: 0 6rpx;
					background: #fff; //金鸡注释
					border-radius: 12rpx;
					display: inline-block;
					vertical-align: top;

					.more-ico {
						position: relative;
						top: 50%;
						transform: translateY(-50%);
						width: 112rpx;
						height: 74rpx;
						display: block;
						margin: 0 auto;
						background: url('https://resource.migudm.cn/group1/M00/D1/C8/oYYBAGQhgaiAHA3vAAAGkY1Hf2M167.png');
						background-size: cover;
					}
				}
			}
		}
	}

	.seckill-slide {
		// width: 100%;
		padding: 0 18rpx;

		.seckill-swiper {
			width: 100%;
			height: 160rpx;

			.seckill-swiper-item {
				width: 100%;
				height: 100%;

				.img {
					width: 160rpx;
					height: 160rpx;
					background-color: #eaeaea;
					border-radius: 12rpx;
				}

				.img-mask-wrapper {
					position: absolute;
					top: 0;
					left: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 160rpx;
					height: 160rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 12rpx;

					.noting-img {
						width: 100rpx;
						height: 100rpx;
					}
				}

				.goods-right {
					margin-left: 24rpx;
					flex: 1;

					.product-name {
						text-align: left;
						height: 80rpx;
						margin-bottom: 24rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						word-break: break-word;
					}

					.information {
						margin: 0 8rpx;
						text-align: left;

						.price {
							color: var(--themeTextColor, #ff004f);
							font-size: 30rpx;
							line-height: 40rpx;

							.fontSize22 {
								font-size: 22rpx;
							}

							.fontSize24 {
								font-size: 24rpx;
							}
						}

						.start-price {
							color: var(--themeTextColor, #999);
							font-size: 24rpx;
							text-decoration: line-through;
							padding-left: 6rpx;
						}

						.buy-btn {
							padding: 8rpx 16rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #ffffff;
							background: #ff004f;
							// background: linear-gradient(180deg, #FAEEBF 1%, #F4D084 100%);
							border-radius: 37rpx;
						}
					}
				}
			}
		}

		.swiper-indicator-dots {
			width: auto;
			position: absolute;
			bottom: 16rpx;
			height: 12rpx;
			left: 50%;
			transform: translateX(-50%);

			.dot {
				width: 12rpx;
				height: 12rpx;
				border-radius: 12rpx;
				background-color: rgba(0, 0, 0, 0.08);
				float: left;
				margin: 0 4rpx;
			}

			.dot.active {
				background-color: rgba(0, 0, 0, 0.2);
				width: 24rpx;
			}
		}
	}

	.padding48 {
		padding: 0 48rpx;
	}

	.paddingBottom32 {
		padding-bottom: 32rpx;
		height: auto !important;
	}

	::-webkit-scrollbar {
		// 直接复制黏贴到样式页.css，完美解决
		display: none;
		/* background-color:transparent; */
	}

	.back-img-cover {
		background-size: cover;
		background-repeat: no-repeat;
	}
</style>